/*
 * @Author: 江舟 jijiangzhou@recycloud.cn
 * @Date: 2024-04-03 14:34:00
 * @LastEditors: 江舟 jijiangzhou@recycloud.cn
 * @LastEditTime: 2024-04-15 15:13:34
 * @FilePath: \vite-project\src\components\common\CommonTabs.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { useLocation, useNavigate } from 'react-router-dom';

export interface CommonTabsType {
	tabs: {
		title?: string;
		path?: string;
	}[];
	loading?: boolean;
}

const CommonTabs: React.FC<CommonTabsType> = ({ tabs = [], loading }) => {
	const { pathname } = useLocation();
	const navigate = useNavigate();
	const handleTo = (path?: string) => {
		if (loading) {
			return;
		}
		if (path === pathname) {
			return;
		}
		path && navigate(path);
	};
	return (
		<div className="flex text-14px bg-white mb-12px border-0px border-b-1px border-solid border-[#eee]">
			{tabs.map((item, index) => (
				<div key={index} className="mr-12px cursor-pointer p-12px relative" onClick={() => handleTo(item?.path)}>
					<div className={`${pathname === item?.path ? 'text-primary' : ''} `}>{item?.title}</div>
					<div
						className={`${
							pathname === item?.path ? 'bg-primary w-full' : 'w-0'
						}  h-3px absolute bottom-0 left-50% -translate-x-50% transition-all`}></div>
				</div>
			))}
		</div>
	);
};

export default CommonTabs;
